<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 创建带有基础URL的axios实例
const api = axios.create({
  baseURL: 'http://localhost:8080', // 确保这里与你的后端API地址一致
  timeout: 5000
})

const navigateTo = (path: string) => {
  router.push(path)
}

// 统计数据
const stats = ref([
  { title: '学员数量', value: 0, icon: 'User', color: '#409EFF', path: '/stu', api: '/student/count' },
  { title: '班级数量', value: 0, icon: 'HomeFilled', color: '#67C23A', path: '/clazz', api: '/clazz/count' },
  { title: '员工数量', value: 0, icon: 'Avatar', color: '#E6A23C', path: '/emp', api: '/emp/count' },
  { title: '部门数量', value: 0, icon: 'HelpFilled', color: '#F56C6C', path: '/dept', api: '/dept/count' }
])

// 快捷入口
const quickLinks = ref([
  { title: '学员管理', icon: 'UserFilled', path: '/stu' },
  { title: '班级管理', icon: 'HomeFilled', path: '/clazz' },
  { title: '员工管理', icon: 'Avatar', path: '/emp' },
  { title: '数据统计', icon: 'Histogram', path: '/report' },
  { title: '系统设置', icon: 'Setting', path: '/system' },
  { title: '日志查看', icon: 'Document', path: '/log' }
])

// 最近活动
const recentActivities = ref([
  { time: '10分钟前', action: '新增了学员张三', operator: '管理员' },
  { time: '30分钟前', action: '更新了班级信息', operator: '李老师' },
  { time: '2小时前', action: '修改了系统配置', operator: '管理员' },
  { time: '5小时前', action: '导出了学员数据', operator: '王老师' },
  { time: '昨天', action: '添加了新员工', operator: '管理员' }
])

// 获取统计数据
const fetchStats = async () => {
  try {
    const requests = stats.value.map(stat => {
      return api.get(stat.api).then(response => response.data.data) // 提取data字段中的数字
    })
    
    const results = await Promise.all(requests)
    
    // 更新统计数据
    stats.value = stats.value.map((stat, index) => ({
      ...stat,
      value: results[index] || 0 // 直接使用数字结果
    }))
  } catch (error) {
    console.error('获取统计数据失败:', error)
    ElMessage.error('获取统计数据失败，请检查网络连接或API服务')
  }
}

// 刷新数据
const refreshData = () => {
  fetchStats()
}

onMounted(() => {
  fetchStats()
})
</script>

<template>
  <div class="dashboard-container">
    <!-- 欢迎横幅 -->
    <div class="welcome-banner">
      <div class="welcome-content">
        <h1>欢迎回来，管理员</h1>
        <p>今天是{{ new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }) }}</p>
      </div>
      <el-button type="primary" @click="refreshData">
        <el-icon><Refresh /></el-icon>刷新数据
      </el-button>
    </div>

    <!-- 数据统计卡片 -->
    <div class="stats-cards">
      <el-card 
        v-for="(stat, index) in stats" 
        :key="index" 
        shadow="hover" 
        class="stat-card"
        @click="navigateTo(stat.path)"
      >
        <div class="stat-content">
          <div class="stat-icon" :style="{ backgroundColor: stat.color }">
            <el-icon><component :is="stat.icon" /></el-icon>
          </div>
          <div class="stat-info">
            <h3>{{ stat.title }}</h3>
            <p>{{ stat.value }}</p>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content">
      <!-- 快捷入口 -->
      <el-card class="quick-access">
        <template #header>
          <div class="card-header">
            <span>快捷入口</span>
          </div>
        </template>
        <div class="quick-links">
          <div 
            v-for="(link, index) in quickLinks" 
            :key="index" 
            class="quick-link-item"
            @click="navigateTo(link.path)"
          >
            <div class="quick-link-icon">
              <el-icon><component :is="link.icon" /></el-icon>
            </div>
            <span>{{ link.title }}</span>
          </div>
        </div>
      </el-card>

      <!-- 最近活动 -->
      <el-card class="recent-activities">
        <template #header>
          <div class="card-header">
            <span>最近活动</span>
            <el-button type="text" @click="navigateTo('/log')">查看全部</el-button>
          </div>
        </template>
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in recentActivities"
            :key="index"
            :timestamp="activity.time"
            placement="top"
          >
            <el-card shadow="hover">
              <p>{{ activity.action }}</p>
              <p class="operator">{{ activity.operator }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>

    <!-- 底部信息 -->
    <div class="footer">
      <p>© 2025 后台管理系统 - 当前版本 v1.0.0</p>
    </div>
  </div>
</template>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.welcome-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #409EFF, #337ecc);
  color: white;
  padding: 20px 30px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.welcome-content h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.welcome-content p {
  margin: 8px 0 0;
  opacity: 0.9;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  cursor: pointer;
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
  font-size: 24px;
}

.stat-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: normal;
  color: #909399;
}

.stat-info p {
  margin: 5px 0 0;
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.main-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 992px) {
  .main-content {
    grid-template-columns: 1fr;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quick-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.quick-link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 0;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 8px;
}

.quick-link-item:hover {
  background-color: #f5f7fa;
  transform: translateY(-3px);
}

.quick-link-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ecf5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: #409EFF;
  font-size: 24px;
}

.recent-activities {
  height: 100%;
}

.operator {
  margin-top: 5px;
  color: #909399;
  font-size: 12px;
}

.footer {
  margin-top: 30px;
  text-align: center;
  padding: 20px 0;
  color: #909399;
  font-size: 14px;
}
</style>